<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #d1{
                background-color: red;
                width: 100px;
                height: 80px;
                border: solid 10px blue;
                border-top: 0px;
                padding: 10px 20px 30px 40px;
                margin: auto;
            }

            #d2{
                width: 100px;
                height: 100px;
                background-color: green;
            }

            #d3{
                width: 0px;
                height: 0px;
                border-bottom: 100px solid yellow;
                border-left: 50px solid transparent;
                border-right: 50px solid rgba(255,255,255,0);
            }

            #d4{
                width: 0px;
                height: 0px;
                border-right: 100px solid #999999;
                border-top: 50px solid transparent;
                border-bottom: 50px solid transparent;
                float: left;
            }

            #d5{
                width: 350px;
                height: 250px;
                background-color: #999999;
                float: left;
            }

            #d6{
                width: 400px;
                height: 400px;
                background-color: #45a8c6;
                clear: left;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div id="d1">abc</div>

        <div id="d2"></div>

        <div id="d3"></div>


        <div id="d4"></div>

        <div id="d5"></div>

        <div id="d6"></div>

    </body>
</html>